<template>
  <div class="article-summary-card">
    <div class="article-image-wrap" @click="goto_article">
      <span class="article-image" :style="{backgroundImage:bg_image}"></span>
    </div>
    <div class="arcticle-info">
      <div class="tag-and-time">
        <span class="arctile-tag">
          {{ tag }}
        </span>
        <span class="artcile-created-time">
          {{ created_at }}
        </span>
      </div>
      <div class="article-summary">
        <h4 class="arctile-title" @click="goto_article">
          {{ title }}
        </h4>
        <p class="arctile-summary-content">
          {{ brief }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  props: {
    id: Number,
    title: {
      type: String,
      default: 'Undefined',
    },
    brief: {
      type: String,
      default: '作者有点懒，暂无简介。。。',
    },
    cover: {
      type: String,
    },
    createdAt: String,
    tag: String,
  },
  computed: {
    created_at: function () {
      return moment(this.createdAt).format('L');
    },
    bg_image: function () {
      return `url(${this.cover || 'https://gw.alicdn.com/tfs/TB15lFuuGmWBuNjy1XaXXXCbXXa-900-500.jpg'})`;
    },
  },
  methods: {
    goto_article: function () {
      this.$router.push(`/article/${this.id}`);
    },
  },
};
</script>
<style src="./style.scss" lang="scss" scoped></style>
